<%@ Page Language="C#" EnableViewState="false" %>
<html>
<head runat="server">
  <title>Ajax IFrame Facebook Application</title>
  <link rel="stylesheet" type="text/css" href="Page.css" />
  <style type="text/css">
  .photo { padding: 3px; border: solid 1px silver; margin: 10px; width: 100px; }
  </style>
</head>
<body onload="loadAllPhotos()">
  <fb:FacebookApplication ID="fbApplication" runat="server" Mode="IFrame"
    ApplicationName="helloWorld" EnableAjaxScenarios="true" />
    
  <h1>Photos</h1>
  <div id="imagePanel">Loading...</div>

  <script type="text/javascript">
  function loadAllPhotos() {
      // NOTE: To keep the sample independent of Ajax libraries/frameworks, I have
      //       chosen to use the raw XMLHTTP API. In general I'd recommend using
      //       a higher level framework that provides a better and more intuitive
      //       API such as Script# (http://projects.nikhilk.net).

      var xmlHTTP;
      if (window.XMLHttpRequest) {
          xmlHTTP = new XMLHttpRequest();
      }
      else if (window.ActiveXObject) {
          xmlHTTP = new ActiveXObject('Microsoft.XMLHTTP');
      }

      if (!xmlHTTP) {
          return;
      }

      xmlHTTP.onreadystatechange = function() {
          if ((xmlHTTP.readyState == 4) && (xmlHTTP.status == 200)) {
              var photoList;
              try {
                  photoList = eval(xmlHTTP.responseText);
              }
              catch (e) {
              }

              var html = '';
              if (!photoList || !photoList.length) {
                  html = 'No photos were returned.'
              }
              else {
                  var htmlBuilder = [];
                  for (var i = 0; i < photoList.length; i++) {
                      htmlBuilder.push('<span class="photo">');
                      htmlBuilder.push('<img src="');
                      htmlBuilder.push(photoList[i].src);
                      htmlBuilder.push('" title="');
                      htmlBuilder.push(photoList[i].caption);
                      htmlBuilder.push('" />');
                      htmlBuilder.push('</span>');
                  }
                  html = htmlBuilder.join('');
              }

              document.getElementById('imagePanel').innerHTML = html;
          }
      };

      // NOTE: Facebook.NET creates the following variables for your script to use:
      //       fbContext - user and session context
      //       fbProxy   - the URL of the app's FacebookProxy.axd service
      //       fbUserID  - the ID of the current logged on Facebook user
      //
      //       To use the proxy simply issue a POST request, with the context and the
      //       Facebook API method you want to call sent to the proxy as request headers
      //       named fbContext and fbMethod.
      //       Then send all the parameters for the method (except things like call_id and
      //       the signature which are computed on the server) as form-encoded name/value
      //       pairs in the request body, as shown.

      xmlHTTP.open('POST', window.fbProxy, true);
      xmlHTTP.setRequestHeader('fbContext', window.fbContext);
      xmlHTTP.setRequestHeader('fbMethod', 'fql.query');
      xmlHTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlHTTP.send("query=select caption, src from photo where aid IN (select aid from album where owner = '" + window.fbUserID + "')");
  }
  </script>
</body>
</html>
